<template>
    <el-container style="height: 660px; border: 1px solid #eee">
        <el-container>
            <el-header style="max-width: 960px;
        font-size: 12px;height: 80px">
                <el-col :span="12" style="text-align: left">
                    <h2 style="font-size: x-large;margin-top: 30px;margin-left: 30px;">企业标准信息公共服务平台</h2>
                </el-col>
                <div style="font-size: 12px;">
                    <el-col :span="12">
                        <div style="margin-top: 10px;text-align: center">
                            <el-link type="primary" style="font-size: 12px;"><a href="/adminLogin" style="color: #409EFF;">管理系统入口</a></el-link>&nbsp;&nbsp;
                            <el-link type="primary" style="font-size: 12px;"><a href="/area" style="color: #409EFF;">企业登录入口</a></el-link>
                        </div>
                    <div style="text-align: left;margin-left: 70px;">
                        统一社会信用代码问题：400807600 工作时间：8:00-20:00
                        <br>
                        系统业务问题咨询：(010)82021084 工作时间：9:00-18:00(节假日除外)
                    </div>
                    </el-col>
                </div>
            </el-header>
            <div>
                <div class="line"></div>
                <el-menu
                        style="max-width: 960px;margin: 0 auto;"
                        :default-active="activeIndex2"
                        class="el-menu-demo"
                        mode="horizontal"
                        background-color="#409EFF"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-menu-item class="el-col-3" style="text-align: center" index="1">首页</el-menu-item>
                    <el-menu-item class="el-col-3" style="text-align: center" index="2">应公开未公开</el-menu-item>
                    <el-menu-item class="el-col-3" style="text-align: center" index="3">责令改正</el-menu-item>
                    <el-menu-item class="el-col-3" style="text-align: center" index="4">标准部门废止</el-menu-item>
                    <el-menu-item class="el-col-3" style="text-align: center" index="5">在线客服</el-menu-item>
                    <el-menu-item class="el-col-3" style="text-align: center" index="6">操作手册</el-menu-item>
                    <el-menu-item class="el-col-3" style="text-align: center" index="7">常见问题</el-menu-item>
                    <el-menu-item class="el-col-3" style="text-align: center" index="8">新闻</el-menu-item>
                </el-menu>
            </div>
            <el-main>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <div class="grid-content bg-purple" style="margin-left: 30px;">
                            输入相应信息，搜索已公开标准信息...
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple" style="margin-left: 30px;">标准名称：
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple" >
                            <el-input v-model="input" placeholder="请输入内容"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">标准编号：
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <el-input v-model="input" placeholder="请输入内容"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple" style="margin-left: 30px;">企业名称：
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <el-input v-model="input" placeholder="请输入内容"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="4" style="font-size: 14px">
                        <div class="grid-content bg-purple">统一社会信用代码：
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <el-input v-model="input" placeholder="请输入内容"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple" style="margin-left: 30px;">地区名称：
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <el-input v-model="input" placeholder="请输入内容"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">标准状态：
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>

                <div style="margin: 8px;">
                    <el-button style="padding: 12px 30px" type="primary">搜索</el-button>
                </div>

            </el-main>
            <el-footer style="height: 200px; border: 1px solid #eee">
                <div id="back2" class="box" style="height: auto;">
                    <ul class="map">
                        <li>
                            <dl>
                                <dt>华北
                                <dt/>
                                <dd code="110000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('110000','北京市')">北京市</a>
                                </dd>
                                <dd code="120000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('120000','天津市')">天津市</a>
                                </dd>
                                <dd code="130000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('130000','河北省')">河北省</a>
                                </dd>
                                <dd code="140000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('140000','山西省')">山西省</a>
                                </dd>
                                <dd code="150000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('150000','内蒙古')">内蒙古自治区</a>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                    东北
                                </dt>
                                <dd code="210000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('210000','辽宁省')">辽宁省</a>
                                </dd>
                                <dd code="220000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('220000','吉林省')">吉林省</a>
                                </dd>
                                <dd code="230000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('230000','黑龙江省')">黑龙江省</a>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                    华东
                                </dt>
                                <dd code="310000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('310000','上海市')">上海市</a>
                                </dd>
                                <dd code="320000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('320000','江苏省')">江苏省</a>
                                </dd>
                                <dd code="330000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('330000','浙江省')">浙江省</a>
                                </dd>
                                <dd code="340000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('340000','安徽省')">安徽省</a>
                                </dd>
                                <dd code="350000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('350000','福建省')">福建省</a>
                                </dd>
                                <dd code="360000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('360000','江西省')">江西省</a>
                                </dd>
                                <dd code="370000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('370000','山东省')">山东省</a>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                    华中
                                </dt>
                                <dd code="410000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('410000','河南省')">河南省</a>
                                </dd>
                                <dd code="420000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('420000','湖北省')">湖北省</a>
                                </dd>
                                <dd code="430000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('430000','湖南省')">湖南省</a>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                    华南
                                </dt>
                                <dd code="440000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('440000','广东省')">广东省</a>
                                </dd>
                                <dd code="450000">
                                    <a class="nav_a"
                                       href="javascript:selectDetailByArea('450000','广西壮族自治区')">广西壮族自治区</a>
                                </dd>
                                <dd code="460000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('460000','海南省')">海南省</a>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>西南</dt>
                                <dd code="500000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('500000','重庆市')">重庆市</a>
                                </dd>
                                <dd code="510000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('510000','四川省')">四川省</a>
                                </dd>
                                <dd code="520000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('520000','贵州省')">贵州省</a>
                                </dd>
                                <dd code="530000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('530000','云南省')">云南省</a>
                                </dd>
                                <dd code="540000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('540000','西藏自治区')">西藏自治区</a>
                                </dd>
                            </dl>
                        </li>
                        <li style="width: 100%; margin-bottom: 20px;">
                            <dl>
                                <dt>西北</dt>
                                <dd code="610000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('610000','陕西省')">陕西省</a>
                                </dd>
                                <dd code="620000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('620000','甘肃省')">甘肃省</a>
                                </dd>
                                <dd code="630000">
                                    <a class="nav_a" href="javascript:selectDetailByArea('630000','青海省')">青海省</a>
                                </dd>
                                <dd code="640000">
                                    <a class="nav_a"
                                       href="javascript:selectDetailByArea('640000','宁夏回族自治区')">宁夏回族自治区</a>
                                </dd>
                                <dd code="650000">
                                    <a class="nav_a"
                                       href="javascript:selectDetailByArea('650000','新疆维吾尔自治区')">新疆维吾尔自治区</a>
                                </dd>
                                <dd code="650000">
                                    <a class="nav_a"
                                       href="javascript:selectDetailByArea('660000','新疆生产建设兵团')">新疆生产建设兵团</a>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </el-footer>
        </el-container>
    </el-container>
</template>

<style scoped>
    #app {
        max-width: 960px;
        margin: 0 auto;
    }

    .el-header {
        max-width: 960px;
        margin-left: 200px;
        color: #409EFF;
        line-height: 20px;
    }

    .el-main {
        max-width: 960px;
        margin: 0 auto;
        background-color: #DCDFE6;
        line-height: 50px;
    }

    .el-footer {
        max-width: 960px;
        margin: 0 auto;
        background-color: #f8f8f8;
        opacity: 0.8;
        margin-bottom: 15px;
        font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: normal;
    }

    .el-button {
        max-width: 960px;
        margin: 0 auto;
        padding: 12px 30px;
        float: right;
    }

    .map {
        list-style: none;
        height: 130px;
        padding: 10px 0 10px 36px;
        display: block;
    }

    .map li {
        display: block;
        width: 50%;
        float: left;
    }

    .map dt {
        display: inline-block;
        font-size: 14px;
        font-weight: 600;
    }

    .map dd {
        margin-inline-start: 10px;
        display: inline-block;
    }

    a {
        text-decoration: none;
        font-size: 14px;
        width: auto;
        color: #999;
    }

</style>

<script>
    export default {
        data() {
            return {
                input: '',
                value: '选项1',

                options: [{
                    value: '选项1',
                    label: '所有'
                }, {
                    value: '选项2',
                    label: '不执行'
                }, {
                    value: '选项3',
                    label: '现行有效'
                }, {
                    value: '选项4',
                    label: '责令改正'
                }, {
                    value: '选项5',
                    label: '企业自行废止'
                }, {
                    value: '选项6',
                    label: '被标准化主管部门废止'
                }]
            }
        }
    };
</script>